<template>
  <div>
    <div><button @click="addAddfn">修改价格和汽车（存在问题）</button></div>
    <div>一辆汽车{{ car.brand }}车，价格{{ p }}</div>
  </div>
</template>
<script setup lang="ts"  name= "person555">
import { reactive, ref, toRefs, toRef } from "vue";

let car = reactive({ brand: "奔驰", price: 100 });
//let { brand, price } = car; //结构赋值,此时数据不是响应式的  需要借助toRefs包裹才可以实现响应式，
var x = toRefs(car);
console.log("xx", x); //这一步打印则可以看出是否添加了响应式  ，，他给对象里面的每一个属性都添加响应式,与之对应的则是toRef则是给指定对象中的某一个指定属性，添加响应式
let { brand, price } = toRefs(car); //toRefs本质底层求助的还是ref使用的时候必须.value才可以
let p = toRef(car, "price"); //toRef本质底层求助的还是ref使用的时候必须.value才可以，则是给对象中指定的某一个属性添加响应式
console.log(p);
let addAddfn = () => {     //这儿也可以使用箭头函数  不需要考虑this指向的问题
  p.value = p.value + 10; //此时  
  console.log(price);
};
//总结 其实使用了toRefs.或toRef（底层求助的还是ref,方法中使用必须.valuevalue），那么模板中使用p  或者使用car.price都一样 都是响应式的
</script>